<template>
	<view class=" slice-select">
		<view class="shadow" @click="hide"></view>
		<view class="content">
			<view class="header">
				<view class="header-bar" v-if="selectedNams.length <= 0">
					请选择
					<view class="link" @click="clear">
						清空
					</view>
				</view>

				<view class="selected-list" v-else>
					<view class="selected-item">
						<view class="selected" :key="index"
							v-for="(item, index) in selectedNams"
							@click="switchEvt(index)">
							<text>{{item.split('_')[0]}}</text>
							<text class="icon iconfont icon-a-icon_more1x"
								v-if="index < selectedNams.length - 1"></text>
						</view>
					</view>
					<view class="link" @click="clear">
						清空
					</view>
				</view>
			</view>
			<view class="list">
				<scroll-view class="scrollList" :scroll-y="true"
					:style="{height: '200px'}">
					<view class="item" v-for="(item, index) in curData"
						:key="index">
						<view class="left" @click="itemCheck(item, index)"
							v-if=" sourceType==='grade' && item.deptType=='grade'">
							<text
								class=" onIcon iconfont icon-a-icon_xuanzhong1x"
								:style="{color:'#4275FD'}"
								v-if="item.id == checkedKey">
							</text>
							<text class="iconfont icon-a-icon_xuanzhong_w1x"
								:style="{color:'#999'}" v-else></text>
						</view>
						<view class="left" @click="itemCheck(item, index)"
							v-if=" sourceType==='class' && item.deptType=='class'">
							<text
								class=" onIcon iconfont icon-a-icon_xuanzhong1x"
								:style="{color:'#4275FD'}"
								v-if="item.id == checkedKey">
							</text>
							<text class="iconfont icon-a-icon_xuanzhong_w1x"
								:style="{color:'#999'}" v-else></text>
						</view>
						<view class="left" @click="itemCheck(item, index)"
							v-if="sourceType === 'userIndex' && item.userIndex">
							<text
								class="onIcon iconfont icon-a-icon_xuanzhong1x"
								:style="{color:'#4275FD'}"
								v-if="item.id == checkedKey"></text>
							<text class="iconfont icon-a-icon_xuanzhong_w1x"
								:style="{color:'#999'}" v-else></text>
						</view>
						<view class="middle"
							v-if="sourceType === 'userIndex' && item.userIndex"
							@click="itemCheck(item, index)">
							{{item.name}}
						</view>
						<view class="middle"
							v-else-if="sourceType === 'class' && item.deptType=='class'"
							@click="itemCheck(item, index)">
							{{item.name}}
						</view>
						<view class="middle" v-else
							@click="itemSelect(item, index)">
							{{item.name}}
						</view>
						<view class="right">
							<text class="icon iconfont icon-a-icon_more1x"
								:style="{color:'#999'}"
								@click="itemSelect(item, index)"
								v-if="item.child && item.child.length && item.deptType != sourceType"></text>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'SliceSelect',
		data() {
			return {
				selectedNams: [],
				selectedKeyList: [],
				checkedKeyList: [],
				checkedKey: '',
				curDataList: [],
				isLast: false,
				item: {}
			}
		},
		props: {
			sourceType: {
				type: String,
				default: 'class',
			},
			soureList: {
				type: Array,
				default () {
					return []
				}
			},
			defaultSelectedKeyList: {
				type: Array,
				default () {
					return []
				}
			},
			defaultCheckedKey: {
				type: String,
				default: ''
			},
		},
		watch: {
			'defaultCheckedKey': {
				handler(defaultCheckedKey) {
					console.log(defaultCheckedKey)
					this.checkedKey = defaultCheckedKey
					this.selectedKeyList = this.defaultSelectedKeyList
					this.formatData()
				},
				immediate: true
			},
			'soureList': {
				handler(soureList) {
					this.formatData()
				},
				immediate: true,
			}
		},
		computed: {
			curData() {
				return this.curDataList[this.curDataList.length - 1]
			}
		},
		mounted() {
			console.log(this.sourceType)
		},
		methods: {
			formatData() {
				let dataSoureList = [...this.soureList]
				let selectedKeyList = [...this.selectedKeyList]

				let selectedNams = []
				let curDataList = [
					[...dataSoureList]
				]
				var tempList = curDataList[curDataList.length - 1]
				selectedKeyList.forEach((selectedKey, index) => {
					tempList.forEach(tempItem => {
						if (tempItem.id === selectedKey) {
							selectedNams.push(`${tempItem.name}_${tempItem.dataIndex}`)
							if (tempItem.child && tempItem.child
								.length && tempItem.deptType != this.sourceType) {
								tempList = [...tempItem.child] 
								curDataList.push(tempList)
							}
						}
					})
				})

				this.selectedNams = selectedNams
				this.curDataList = [...curDataList]
			},
			clear() {
				this.checkedKey = ''
				this.selectedKeyList = []
				this.selectedNams = []
				this.$emit('onChecked', {
					selectedKeyList: this.selectedKeyList,
					selectedNams: this.selectedNams,
					checkedKey: '',
					item: {},
				})
			},
			hide() {
				this.$emit('onChecked', {
					hide: true
				})
			},
			itemCheck(item, index) {
				console.log(item)
				console.log(index)
				let checkedKey = this.checkedKey
				if (item.id == this.checkedKey) {
					checkedKey = ''
				} else {
					checkedKey = item.id
				}
				this.checkedKey = checkedKey
				this.$emit('onChecked', {
					selectedKeyList: this.selectedKeyList,
					selectedNams: this.selectedNams,
					checkedKey,
					item,
					hide: true
				})
			},
			singleSelectClear(list) {
				if (!list || !list.length) return
				list.map(item => {
					item.selected = false
				})
			},
			itemSelect(item, index) {
				if (!item.child || !item.child.length || item.deptType == this.sourceType) return
				let selectedKeyList = [...this.selectedKeyList]
				selectedKeyList.push(item.id)
				this.selectedKeyList = selectedKeyList
				this.formatData()
			},
			switchEvt(index) {
				let selectedKeyList = this.selectedKeyList.splice(0, index)
				this.selectedKeyList = selectedKeyList
				this.formatData()
			},
			checkIsLast(list) {
				this.isLast = true
				if (!list && !list.length) return
				list.map(item => {
					if (item.child && item.child.length) {
						this.isLast = false
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.slice-select {
		position: fixed;
		top: 176rpx;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 10;
	}

	.shadow {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 11;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 0 0 16rpx 16rpx;
		z-index: 12;
	}

	.header {
		display: flex;
		height: 108rpx;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
		padding: 0 24rpx;

		.header-bar {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;

		}

		.link {
			color: #4275FD;
		}
	}

	.header .icon {
		color: #999;

	}

	.iconfont {
		padding: 24rpx;
	}

	.selected-item {
		width: calc(100% - 80rpx);
		display: flex;
	}

	.header .selected {
		color: #4275FD;
		font-size: 30rpx;
		font-weight: 400;
		cursor: pointer;
		width: auto;
	}

	.selected-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		width: 100%;
	}


	.header .selected.last {
		color: #333;
	}

	.header .selected text {
		// margin-right: 24rpx;
	}

	.scrollList .item {
		display: flex;
		align-items: center;
		height: 108rpx;
		padding: 0 24rpx;
		color: #333;
		font-size: 30rpx;
		font-weight: 400;
		cursor: pointer;
		user-select: none;
	}

	.scrollList .item .middle {
		flex: 1;
		/* padding: 0 24rpx; */
	}
</style>
